<template>
    <div class="videolist" @click="toVideo(videoList)">
         <div class="weui-cell user" v-if="isUser">
             <div class="weui-cell__hd">
                <avatar :avatar="videoList.user.avatar" 
                        :Level="videoList.user.partner_level" 
                        :userId="videoList.user.id" 
                        :isAuth="videoList.user.is_auth" 
                        :isPartner="videoList.user.is_partner"></avatar>
             </div>
             <div class="weui-cell__bd">
                 <div class="nickname">{{videoList.user.nickname}}</div>
                 <div class="time">{{videoList.created_at}}</div>
             </div>
             <div class="weui-cell__ft">
                 <report :info="videoList" type="1" model="1"></report>
             </div>
         </div>
         <div class="content"  @click.stop>
             {{videoList.video_desc}}
         </div>
         <div class="video">
             <video :src="videoList.video" show-center-play-btn="false"  :id="video+'videoList.id'" autoplay='false' @click.stop v-if="playIndex==videoList.id"></video>
             <!-- <img :src="videoList.thumb" alt="" class="poster" mode="aspectFill" lazy-load="true"> -->
             <imgLoad 
                defaultImage='/static/images/z1.png'
                :originalImage='videoList.thumb' 
                 :key="idx"
                width="690rpx"
                height="340rpx"
                 v-if="playIndex!=videoList.id"
            />  
            <div>

            </div>
             <img src="/static/images/play1.png" alt="" class="playBtn" v-if="playIndex!=videoList.id"  @click.stop="videoPLay(videoList.id)">
         </div>
        <div class="weui-cell" v-if="isOperate">
             <div class="weui-cell__bd ">
                <operate :info="videoList" iszan="true" isshare="true" iscomt="true"  ></operate>
             </div>
             <div class="weui-cell__ft time" v-if="type!=2">
                 {{videoList.created_at}}
             </div>
         </div> 
    </div>
</template>

<script>
import report from "@/components/report";
import operate from "@/components/operate";
import avatar from "@/components/avatar"
import imgLoad from "@/components/imgLoad";
export default {
   props:["videoList","type",'isUser',"isOperate","playIndex"],
   components: {
       imgLoad,
       report,
       operate,
       avatar
   },
   methods:{
       toVideo(info){
           let url="../videoDetail/main?id="+info.id+"&keType="+info.article_type;
           mpvue.navigateTo({url})
       },
       videoPLay(id){
           this.$emit("videoPLay",{id})
       }
   }
}
</script>

<style lang="scss" scoped>
    .videolist{
         border-bottom: 5px solid #F4F5F5;
        .user{
            .avatar{
                border:1px solid rgba(26,132,251,1);
                border-radius:50%;
                width:45px;
                height:45px;
                display: block;
                margin-right:12px;
            }
            .nickname{
                font-size:14px;
                font-weight:bold;
                color:rgba(26,132,251,1);
                line-height:18px;
            }
            .time{
                font-size:11px;
                font-weight:500;
                color:rgba(102,102,102,1);
                line-height:18px;
            }
            .report{
                width:25px;
                height:15px;
                display: block;
            }
        }
        .content{
            padding: 0 15px;
            font-size:14px;
            font-weight:bold;
            color:rgba(51,51,51,1);
        }
        .video{
            padding:10px 15px;
            padding-bottom:0;
            width: 345px;
            height: 170px;
            position: relative;
            
            video{
                width:100%;
                display:block;
                width: 345px;
                height: 170px;
            }
            .poster{
                position: absolute;
                top: 10px;
                left: 15px;
                display:block;
                width: 345px;
                height: 170px;
            }
            .playBtn{
                width:39px;
                height:39px;
                position: absolute;
                top: 10px;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                display: block;
            }
        }
        .time{
            font-size:12px;
            font-weight:500;
            color:rgba(102,102,102,1);
            line-height:18px;
        }
    } 
</style>
